<template>
  <div class="container">
    <!-- 操作栏 -->
    <Header @refresh="refresh" />
    <div class="page-main">
      <div class="page-main-query">
        <FilterBar>
          <template #left>
            <el-form :inline="true">
              <el-form-item prop="daterange">
                <el-date-picker style="width: 250px" v-model="query.daterange" type="daterange" range-separator="至"
                  start-placeholder="开始时间" end-placeholder="结束时间" @change="queryChange" :clearable="false" :shortcuts="shortcuts" />
              </el-form-item>
              <el-form-item prop="menuIdList">
                <AreaSelect v-model:data="query.areaCode" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="reset">重置</el-button>
              </el-form-item>
            </el-form>
          </template>
        </FilterBar>
      </div>
      <!-- 正文 -->
      <section>
        <h5>应用统计</h5>
        <DataGroup :time="parseTimeData" :code="code" />
        <h5>服务统计</h5>
        <AssetGroup type="service" :time="parseTimeData" :code="code" />
        <h5>事件统计</h5>
        <AssetGroup type="event" :time="parseTimeData" :code="code"  />
        <h5 v-show="query.areaCode == '330300'">区县统计</h5>
        <AreaGroup :time="parseTimeData" v-show="query.areaCode == '330300'" />
      </section>
    </div>
  </div>
</template>

<script lang="jsx">
import { ref, onMounted, defineComponent, reactive, watch,computed } from "vue";
import Header from "@/components/Header.vue";
import FilterBar from "@/components/FilterBar.vue";
import AreaSelect from "@/components/AreaSelect/";
import DataGroup from "./components/DataGroup.vue";
import AssetGroup from "./components/AssetGroup.vue";
import AreaGroup from "./components/AreaGroup.vue";

import { parseTime } from '@/utils'

export default defineComponent({
  name: "AdaptationDataSource",
  components: {
    Header,
    FilterBar,
    AreaSelect,
    DataGroup,
    AssetGroup,
    AreaGroup
  },
  setup(props, { emit, slots }) {
    const query = reactive({
      daterange: null,
      areaCode: "330300"
    });
    const parseTimeData = ref({
      endDate: null,
      startDate: null
    })
    const queryChange = () => {
      if (!query.daterange || Object.keys(query.daterange).length == 0) {
        parseTimeData.value = {
          startDate: null,
          endDate: null
        }
      } else {
        parseTimeData.value = {
          startDate: query.daterange[0] ? parseTime(query.daterange[0],'{yy}-{mm}-{dd} 00:00:00') : null,
          endDate: query.daterange[1] ? parseTime(query.daterange[1],'{yy}-{mm}-{dd} 00:00:00') : null
        }
      }
    }
    const refresh = () => {

    }

    const reset = () => {
      const start = new Date();
      const end = new Date(new Date(new Date().toLocaleDateString()).getTime()-1);
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 31);
      query.daterange = [start, end]
      query.areaCode = "330300"
      queryChange()
    }
    const shortcuts = computed(() => {
      const end = new Date(new Date(new Date().toLocaleDateString()).getTime()-1);
      return [
      {
        text: '近7天',
        value: () => {
         
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
          return [start, end]
        },
      },
      {
        text: '近14天',
        value: () => {

          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 14)
          return [start, end]
        },
      },
      {
        text: '近1个月',
        value: () => {

          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 31)
          return [start, end]
        },
      },
      {
        text: '近3个月',
        value: () => {
 
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
          return [start, end]
        },
      },
      {
        text: '近半年',
        value: () => {

          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 180)
          return [start, end]
        },
      },
      {
        text: '近一年',
        value: () => {
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 366)
          return [start, end]
        },
      },
    ]
    })
    // 为了满足选温州市的时候传空的 后端的要求
    const code = computed(() => {
      return query.areaCode=='330300'?'':query.areaCode
    })
    onMounted(() => {
      reset()
    });

    return {
      parseTimeData,
      query,
      queryChange,
      refresh,
      reset,
      shortcuts,
      code
    };
  },
});
</script>
<style lang="scss" scoped>
h5 {
  margin: 20px 0;
  border-left: 4px solid #2e69eb;
  height: 16px;
  line-height: 18px;
  padding-left: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #3C475D;
  margin-top: 40px;

  &:first-child {
    margin-top: 10px;
  }
}
:deep(h6) {
  font-weight: 800;
}
.el-form--inline .el-form-item {
  margin-right: 10px;
}
.page-main{
  position:relative;
  height: 100%;
  overflow: hidden;
  >section {
    margin-top: 50px;
    overflow: auto;
    height: calc(100% - 100px);
  }
}
.page-main-query {
  position: absolute;
}
</style>